import React from 'react'
import { Row, Col, Card, Tag, message } from 'antd'
import { ToolOutlined, RiseOutlined, ShopOutlined } from '@ant-design/icons'

const AgriculturalService: React.FC = () => {
  // 查看服务详情
  const handleViewService = (service: typeof services[0]) => {
    message.info(`查看${service.title}详情`)
    // 实际应用中可以跳转到详情页面或显示详情模态框
  }

  // 使用服务
  const handleUseService = (service: typeof services[0]) => {
    message.success(`正在使用${service.title}服务`)
    // 实际应用中可以跳转到服务使用页面或执行相应操作
  }
  const services = [
    {
      title: '农技指导',
      description: '农业技术在线指导，专家答疑',
      status: 'active',
      icon: <ToolOutlined />
    },
    {
      title: '供应链管理',
      description: '农产品供应链优化服务',
      status: 'active',
      icon: <RiseOutlined />
    },
    {
      title: '市场信息',
      description: '农产品市场行情分析',
      status: 'active',
      icon: <ShopOutlined />
    }
  ]

  return (
    <div>
      <div className="page-title">
        <ToolOutlined />
        农业生产者全链条产业服务
      </div>

      <Row gutter={[16, 16]}>
        {services.map((service, index) => (
          <Col xs={24} sm={12} lg={8} key={index}>
            <Card 
              className="custom-card"
              actions={[
                <a key="view" onClick={() => handleViewService(service)}>查看详情</a>,
                <a key="use" onClick={() => handleUseService(service)}>立即使用</a>
              ]}
            >
              <Card.Meta
                avatar={service.icon}
                title={
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    {service.title}
                    <Tag color="success">已上线</Tag>
                  </div>
                }
                description={service.description}
              />
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  )
}

export default AgriculturalService